/* eslint-disable no-shadow */
import React, { Component } from 'react';
import { Dispatch } from 'redux';

import _ from 'lodash';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Row,
  Col,
  Descriptions,
  Button,
  Modal,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

import { phoneUrl } from '../../../../../config/request.config';
import { authInfoList } from '../constant';

const { Item } = Descriptions;
const { confirm } = Modal;

interface tencentInfoProps extends FormComponentProps {
  dispatch: Dispatch<any>;
  tabIndex: string;
  tencentDetail: any;
}

class TencentInfoElem extends Component<tencentInfoProps> {
  componentDidMount() {
    this.fetchDetail();
  }

  // 解除授权
  deauthorize = () => {
    const { dispatch } = this.props;

    confirm({
      title: '解除授权确认',
      content: '解除授权后将不再通过该公众号发送微信推送，所绑定的柜体将全部解绑！',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({ type: 'tencentConfig/fetchRelieveImpower' });
      },
    });
  }

  fetchDetail = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'tencentConfig/fetchTencentDetail' });
  }

  // 再次授权
  handleImpower = () => {
    const { dispatch } = this.props;

    dispatch({
      type: 'tencentConfig/fetchImpower',
    }).then((res: any) => {
      if (res) {
        if (res) {
          const { componentAppid, preAuthCode } = res.body;
          const redirect_uri = window.location.href;

          window.location.href = `https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=${componentAppid}&pre_auth_code=${preAuthCode}&redirect_uri=${redirect_uri}`;
        }
      }
    });
  }

  renderTitle = () => (
    <p style={{ display: 'flex', marginBottom: '0' }}>
      <span style={{ flex: '1' }}>公众号基本信息</span>
      <span
        style={{
          fontWeight: 'normal',
          color: '#1890ff',
          fontSize: '14px',
          cursor: 'pointer',
        }}
        onClick={this.deauthorize}
      >
        解除授权
      </span>
    </p>
  )

  render() {
    const { tencentDetail } = this.props;
    const { authInfo } = tencentDetail;

    const authInfoArr = authInfo ? JSON.parse(authInfo).reduce((pre: any, cur: any) => {
      pre.push(cur.funcscope_category.id);
      return pre;
    }, []) : [];

    return (
      <Card bordered={false} className="noMarginLeft">
        <Descriptions title={this.renderTitle()} bordered column={1}>
          <Item label="公众号头像">
            <img
              src={tencentDetail.headImg || 'https://cdn2.jinlb.cn/pic/c7/b3/c7b305c13cfe4d575e6f6b29785c4877.jpg'}
              alt=""
              style={{ width: '100px', height: '100px', border: '1px solid #eee' }}
            />
          </Item>
          <Item label="公众号名称">{tencentDetail.nickName}</Item>
          <Item label="公众号原始ID">{tencentDetail.userName}</Item>
          <Item label="公众号主体名称">{tencentDetail.principalName}</Item>
          <Item label="授权情况">
            <div style={{
              margin: '20px 0',
              padding: '0 20px',
            }}
            >
              <Row gutter={12}>
                {
                  authInfoArr.map((item: any) => (
                    <Col md={6} sm={24} key={item} style={{ margin: '4px 0' }}>
                      <span style={{
                        width: '10px',
                        height: '10px',
                        display: 'inline-block',
                        borderRadius: '50%',
                        background: '#ccc',
                        marginRight: '10px',
                      }}
                      />{authInfoList[item]}
                    </Col>
                  ))
                }
              </Row>
            </div>
          </Item>
        </Descriptions>

        <Button
          size="large"
          style={{
            background: '#04BE02',
            color: '#fff',
            borderRadius: '5px',
            width: '300px',
            display: 'block',
            margin: '30px auto 0 auto',
          }}
          onClick={this.handleImpower}
        >
          再次授权
        </Button>

        <Descriptions title="公众号菜单" bordered column={1}>
          <Item label="绑定手机号">
            {`${phoneUrl}?serviceId=${tencentDetail.id}`}
          </Item>
        </Descriptions>
      </Card>
    );
  }
}

export default Form.create<tencentInfoProps>()(TencentInfoElem);
